﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder" runat="server">

    <script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        var myLatlng = new google.maps.LatLng(22, 113);
        var marker;
        var map;
        var stationInfo;
        var stationEmpList;
        var directionsService = new google.maps.DirectionsService();

        function initialize() {
            var mapOptions = {
                zoom: 9,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: myLatlng
            };

            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            stationInfo = new google.maps.InfoWindow({
                content: $("#divInfoH").html()
            });

            stationEmpList = new google.maps.InfoWindow({
                content: $("#divEmpsList").html()
            });

            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: myLatlng
            });

            google.maps.event.addListener(marker, 'click', showInfo);

        }

        function showInfo() {
            document.getElementById("divLL").innerHTML = marker.position;
            return;
            if (stationEmpList != null)
                stationEmpList.close();
            stationInfo.open(map, marker);
            return false;
        }

        function showEmpList() {
            if (stationInfo != null)
                stationInfo.close();
            stationEmpList.open(map, marker);
            return false;
        }

        $(function() {
            initialize();
            //calcRoute();
        });

        function calcRoute() {
            var start = new google.maps.LatLng(22, 113);
            var end = new google.maps.LatLng(23, 113);
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    alert(response);
                }
            });
        }
        function drawline() {
            var directionsService = new google.maps.DirectionsService();

            var lls = $("#tall").val().split('\n');
            var i = 0, j = 0;
            var ll;
            var lllist = [];
            var waypts = [];
            for (i = 0; i < lls.length; i++) {
                var lla = lls[i].split(',');
                ll = new google.maps.LatLng(lla[0], lla[1]);
                lllist.push(ll);
            }
            for (i = 0; i < lllist.length; i++) {
                var marker = new google.maps.Marker({
                    title: 'T' + lllist[0].Ha,
                    map: map,
                    draggable: true,
                    animation: google.maps.Animation.DROP,
                    position: lllist[i]
                });
            }
            var start = lllist[0];
            var end = lllist[lllist.length - 1];
            for (i = 1; i < lllist.length - 1; i++) {
                waypts.push({ location: lllist[i], stopover: true });
            }
            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            var directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true, preserveViewport: false });
            directionsDisplay.setMap(map);
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
                else {
                    alert("FF");
                }
            });
            /*
            var routeLine = new google.maps.Polyline({
            path: lllist,
            strokeColor: "#0000FF",
            strokeOpacity: 1,
            strokeWeight: 5
            });
            routeLine.setMap(map);
            */
            map.setCenter(lllist[0]);
        }
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContainerPlaceHolder" runat="server">
    <div class="title ">
        地图测试</div>
    <div id="divLL">
    </div>
    <div id="map_canvas" style="width: 600px; height: 400px;">
        map div</div>
    <div id="divInfoH" style="display: none;">
        <div>
            <h3>
                世界之窗-信息</h3>
            <div>
                预计到站时间：18：20<br />
                所属路线：S1（下班班车）<br />
                运行时间：周一，周二。<br />
                所有站点：腾讯大厦（18：00）-飞亚达（18：10）-世界之窗（18：20）<br />
                昨天刷卡人数：20人 <a href="#" onclick="return showEmpList();">查看列表</a><br />
                <br />
                <a href="#">关注此站点</a> <a href="#">关注此路线</a> <a href="#">发送到我的手机</a>
            </div>
        </div>
    </div>
    <div id="divEmpsList" style="display: none;">
        <h3>
            世界之窗-刷卡人员列表</h3>
        <div>
            zhangsan(张三),lisi(李四），wangwu(王五)，zhaoliu(赵六)，<br />
            zhangsan(张三),lisi(李四），wangwu(王五)，zhaoliu(赵六)，<br />
            zhangsan(张三),lisi(李四），wangwu(王五)，zhaoliu(赵六)，<br />
            zhangsan(张三),lisi(李四），wangwu(王五)，zhaoliu(赵六)
        </div>
        <a href="#" onclick="return showInfo();">返回</a>
    </div>
    <div>
        <textarea id="tall" cols="50" rows="10">
22.541411717732746,113.95178307427301
22.545246124267578,113.93085479736328
22.544073985173153,113.93082251915565
22.529749719720136,113.92203521728515
22.530032938176933,113.92022150213068</textarea>
        <input type="button" onclick="drawline()" value="DrawLine" />
    </div>
</asp:Content>
